<template>
  <div>
    <div class="table-head">
      <table>
        <slot name="table-set"></slot>
        <thead>
          <tr ref="tr">
            <slot name="thead"></slot>
          </tr>
        </thead>
      </table>
    </div>
    <div class="table-body">
      <table>
        <slot name="table-set"></slot>
        <tbody>
          <tr v-for="(d,index) in data" :key="index">
            <slot name="content" :data="d"></slot>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
export default {
  name: "TaTable",
  props: {
    data: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  data() {
    return {};
  },
  mounted() {
  }
};
</script>

<style scoped>
table {
  font-size: 1em;
  width: 100%;
}
th {
  text-align: left;
}
tr {
  border-bottom: 1px solid #999;
}
th,
td {
  padding: 8px 12px;
  word-break: break-all;
}
.table-body {
  overflow: auto;
}
</style>